数据治理-物理模型

src/views/dataWarehousePlanning/physicalModel/modelDetail/assetRelation/asset.data.ts

@@ -87,3 +87,30 @@ export const entityFormSchema: FormSchema[] = [
     renderComponentContent: '仅显示我的导入',
   },
 ];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '工作表名',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '编号',
+    dataIndex: 'code',
+    width: 120,
+  },
+  {
+    title: '错误类型',
+    dataIndex: 'type',
+    width: 120,
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'file',
+    label: '血缘编辑文件',
+    slot: 'file',
+    colProps: { lg: 24, md: 24 },
+  },
+];

src/views/dataWarehousePlanning/physicalModel/modelDetail/assetRelation/assetData.ts

@@ -7,3 +7,41 @@ export const entityData: any[] = [
     importStatus: '失败(0/13)',
   },
 ];
+
+export const editData: any[] = [
+  {
+    name: 'Sheet0',
+    code: 'C2',
+    type: '数据源不存在',
+  },
+  {
+    name: 'Sheet1',
+    code: 'C3',
+    type: '数据源不存在',
+  },
+  {
+    name: 'Sheet2',
+    code: 'C4',
+    type: '数据源不存在',
+  },
+  {
+    name: 'Sheet3',
+    code: 'C5',
+    type: '数据源不存在',
+  },
+  {
+    name: 'Sheet4',
+    code: 'C6',
+    type: '数据源不存在',
+  },
+  {
+    name: 'Sheet5',
+    code: 'C7',
+    type: '数据源不存在',
+  },
+  {
+    name: 'Sheet6',
+    code: 'C8',
+    type: '数据源不存在',
+  },
+];

src/views/dataWarehousePlanning/physicalModel/modelDetail/assetRelation/assetER.vue

@@ -6,7 +6,65 @@
       <a-button type="primary">全屏</a-button>
       <a-button type="primary" @click="handleQuit">退出</a-button>
     </template>
-    <img src="../../../../../assets/images/assetER.png" style="width: 100%" />
+    <div :class="divHeight > 57 ? 'imgclass1' : 'imgclass2'">
+      <img
+        @click="handleDetail"
+        src="../../../../../assets/images/assetER.png"
+        style="width: 100%; object-fit: cover"
+      />
+    </div>
+    <div v-show="isDetail" ref="info">
+      <CollapseContainer maxHeight="340px" title="基础收缩示例">
+        <Tabs v-model:activeKey="tabsKey">
+          <Tabs.TabPane key="1" tab="基本信息">
+            <div class="comparsion-title">表信息</div>
+            <Description
+              size="middle"
+              :bordered="false"
+              :column="2"
+              :data="infoData"
+              :schema="checkFormSchema"
+            />
+            <Divider style="width: 48%" />
+            <div class="comparsion-title">管理元数据</div>
+            <Description
+              size="middle"
+              :bordered="false"
+              :column="2"
+              :data="partitioncheckinfoData"
+              :schema="partitioncheckFormSchema"
+            />
+          </Tabs.TabPane>
+          <Tabs.TabPane key="2" tab="详细信息">
+            <div class="comparsion-title">分区信息</div>
+            <Description
+              size="middle"
+              :bordered="false"
+              :column="1"
+              :data="areaInfoData"
+              :schema="areaFormSchema"
+            />
+            <Divider style="width: 50%" />
+            <div class="comparsion-title">分桶信息</div>
+            <Description
+              size="middle"
+              :bordered="false"
+              :column="1"
+              :data="bucketInfoData"
+              :schema="bucketFormSchema"
+            />
+            <Divider style="width: 50%" />
+            <div class="comparsion-title">列信息</div>
+            <BasicTable @register="registerTable" :searchInfo="searchInfo" />
+          </Tabs.TabPane>
+          <Tabs.TabPane key="3" tab="模型关联">
+            <SourceData style="margin-top: 20px" />
+            <LogicalModel style="margin-top: 20px" />
+            <SqlDevelop style="margin-top: 40px" />
+          </Tabs.TabPane>
+        </Tabs>
+      </CollapseContainer>
+    </div>
   </PageWrapper>
 </template>
 
@@ -17,13 +75,61 @@
   import { chartTreeData } from './relate.data';
   import CrossModel from '@/views/dataWarehousePlanning/physicalModel/modelDetail/modelRelationship/crossModel.vue';
   import { useModal } from '@/components/Modal';
-  import { ref } from 'vue';
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
   import { useRouter } from 'vue-router';
+  import {
+    areaFormSchema,
+    areaInfoData,
+    bucketFormSchema,
+    bucketInfoData,
+    checkFormSchema,
+    infoData,
+    partitioncheckFormSchema,
+    partitioncheckinfoData,
+  } from '@/views/dataWarehousePlanning/physicalModel/upload/uploadData';
+  import { Divider, Tabs } from 'ant-design-vue';
+  import { CollapseContainer } from '@/components/Container';
+  import { Description } from '@/components/Description';
+  import { BasicTable, useTable } from '@/components/Table';
+  import SqlDevelop from '@/views/dataWarehousePlanning/physicalModel/modelDetail/sqlDevelop.vue';
+  import LogicalModel from '@/views/dataWarehousePlanning/physicalModel/modelDetail/logicalModel.vue';
+  import SourceData from '@/views/dataWarehousePlanning/physicalModel/modelDetail/sourceData.vue';
+  import { checkinfoData } from '@/views/dataWarehousePlanning/physicalModel/modelDetail/modelData';
+  import { checkcolumnsDetail } from '@/views/dataWarehousePlanning/physicalModel/model.data';
 
   // 模态框
   const [crossModal, { openModal }] = useModal();
+  const tabsKey = ref('1');
+  const isDetail = ref(false);
   let modelLevel = ref('1');
 
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
+    scroll: { y: 200 },
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: checkinfoData.length,
+        code: '',
+        message: '',
+        data: checkinfoData,
+      };
+      return { ...response };
+    },
+    columns: checkcolumnsDetail,
+    showIndexColumn: false,
+    rowSelection: false,
+    pagination: true,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+  });
+
   function handleSelect(key) {
     if (key[0] !== null && key[0] !== undefined) {
       modelLevel.value = key[0];
@@ -39,6 +145,10 @@
   function handleQuit() {
     router.go(-1);
   }
+
+  function handleDetail() {
+    isDetail.value = true;
+  }
   function handleAdd() {
     openModal(true);
   }
@@ -52,10 +162,50 @@
   //     value: '当前模型实体',
   //   },
   // ];
+  const divHeight = ref(0); // Store the height of the div
+  const info = ref(null); // Reference to the info div
+
+  // Function to update divHeight based on the element's height
+  const updateHeight = () => {
+    if (info.value) {
+      divHeight.value = info.value.offsetHeight;
+    }
+  };
+
+  onMounted(() => {
+    // Set the initial height on mount
+    if (info.value) {
+      updateHeight();
+
+      // Set up ResizeObserver to monitor the size changes of the div
+      const resizeObserver = new ResizeObserver(updateHeight);
+      resizeObserver.observe(info.value);
+
+      // Cleanup observer when the component is unmounted
+      onBeforeUnmount(() => {
+        resizeObserver.disconnect();
+      });
+    }
+  });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .erchart-img {
     height: calc(100vh - 200px);
   }
+  .info {
+    width: 100%;
+    padding: 10px;
+    background-color: lightblue;
+    resize: both;
+    overflow: auto;
+  }
+  .imgclass1 {
+    height: 300px;
+    overflow-y: hidden;
+  }
+  .imgclass2 {
+    height: 700px;
+    overflow-y: hidden;
+  }
 </style>

src/views/dataWarehousePlanning/physicalModel/modelDetail/assetRelation/editHistory.vue

@@ -20,7 +20,7 @@
               },
               {
                 icon: 'ant-design:download-outlined',
-                onClick: handleEntityEditModel.bind(null, record),
+                onClick: handleDownLoadModel.bind(null, record),
               },
               {
                 icon: 'ant-design:exception-outlined',
@@ -62,7 +62,19 @@
     });
   }
   // 实体编辑
-  function handleEntityEditModel(record: Recordable) {}
+  function handleDownLoadModel(record: Recordable) {
+    // 创建一个空的 Blob 对象，表示空文件内容
+    const emptyBlob = new Blob([], { type: 'excel/plain' });
+    // 使用 URL.createObjectURL 创建一个可下载的链接
+    const downloadLink = document.createElement('a');
+    downloadLink.href = URL.createObjectURL(emptyBlob);
+    // 设置下载文件的名称
+    downloadLink.download = 'emptyFile.xlsx';
+    // 自动触发点击事件，开始下载
+    downloadLink.click();
+    // 释放对象URL，避免内存泄漏
+    URL.revokeObjectURL(downloadLink.href);
+  }
   function entitySuccess({ isUpdate, values }) {
     if (isUpdate) {
       // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
@@ -130,7 +142,9 @@
     });
   }
 
+  function handleEntityEditModel(record: Recordable) {
 
+  }
 
   onMounted(() => {
     tableData.value = TreeData;

src/views/dataWarehousePlanning/physicalModel/modelDetail/assetRelation/index.vue

@@ -3,35 +3,77 @@
     <template #footer>
       <Tabs>
         <Tabs.TabPane key="1" tab="编辑">
-
+          <BasicForm @register="registerForm">
+            <template #file>
+              <div style="display: flex">
+                <div>
+                  <a-button>下载文件模板</a-button>
+                  <a-button type="primary" style="margin-left: 5px">选择文件</a-button>
+                </div>
+              </div>
+            </template>
+          </BasicForm>
+          <div style="padding-left: 100px">
+            <a-button type="primary" @click="handleSubmit">提交</a-button>
+          </div>
+          <BasicTable @register="registerTable" />
         </Tabs.TabPane>
         <Tabs.TabPane key="2" tab="编辑历史">
-          <EditHistory/>
+          <EditHistory />
         </Tabs.TabPane>
-
       </Tabs>
     </template>
   </PageWrapper>
-
 </template>
 
 <script lang="ts" setup>
-import PageConfigModal from "@/views/dataSourceManage/dataSource/pageConfigModal.vue";
-import {PageWrapper} from "@/components/Page/index.js";
-import {BasicTable} from "@/components/Table";
-import SqlDevelop from "@/views/dataWarehousePlanning/physicalModel/modelDetail/sqlDevelop.vue";
-import SourceData from "@/views/dataWarehousePlanning/physicalModel/modelDetail/sourceData.vue";
-import {Select, Tabs} from "ant-design-vue";
-import BasicForm from "@/components/Form/src/BasicForm.vue";
-import LogicalModel from "@/views/dataWarehousePlanning/physicalModel/modelDetail/logicalModel.vue";
-import DetailInfo from "@/views/dataWarehousePlanning/physicalModel/modelDetail/detailInfo.vue";
-import ModelRelationship
-  from "@/views/dataWarehousePlanning/physicalModel/modelDetail/modelRelationship/modelRelationship.vue";
-import EditHistory
-  from "@/views/dataWarehousePlanning/physicalModel/modelDetail/assetRelation/editHistory.vue";
+  import PageConfigModal from '@/views/dataSourceManage/dataSource/pageConfigModal.vue';
+  import { PageWrapper } from '@/components/Page/index.js';
+  import { BasicTable, useTable } from '@/components/Table';
+  import SqlDevelop from '@/views/dataWarehousePlanning/physicalModel/modelDetail/sqlDevelop.vue';
+  import SourceData from '@/views/dataWarehousePlanning/physicalModel/modelDetail/sourceData.vue';
+  import { Select, Tabs } from 'ant-design-vue';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import LogicalModel from '@/views/dataWarehousePlanning/physicalModel/modelDetail/logicalModel.vue';
+  import DetailInfo from '@/views/dataWarehousePlanning/physicalModel/modelDetail/detailInfo.vue';
+  import ModelRelationship from '@/views/dataWarehousePlanning/physicalModel/modelDetail/modelRelationship/modelRelationship.vue';
+  import EditHistory from '@/views/dataWarehousePlanning/physicalModel/modelDetail/assetRelation/editHistory.vue';
+  import { columns } from '@/views/kinship/kinshipEdit/data';
 
-</script>
+  const [registerForm, { resetFields }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
 
-<style scoped>
+  const [registerTable, { reload }] = useTable({
+    title: '错误列表',
+    api: async () => {
+      const response = {
+        pageNum: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      //过滤data中的数据，取出等于params.deptId的数据
+      var data = [];
+      data = tableData.value;
+      return { ...response, data: data };
+    },
+    pagination: false,
+    columns,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+  });
+</script>
 
-</style>
+<style scoped></style>

src/views/dataWarehousePlanning/physicalModel/upload/uploadData.ts

@@ -147,11 +147,12 @@ export const bucketFormSchema: any[] = [
 
 
 export const areaInfoData = {
-  physicalName: 'dw_prd_contract_f',
-  modelId: '/admin-个人工作区/SDM数仓/argodb_test/dw_data/dw_prd_contract_f',
+  areaType: '-',
+  areaField: '-',
 };
 
 export const bucketInfoData = {
-  physicalName: 'dw_prd_contract_f',
-  modelId: '/admin-个人工作区/SDM数仓/argodb_test/dw_data/dw_prd_contract_f',
+  bucketNum: '3',
+  bucketField: '-',
+  sortField: '-',
 };