er图

src/router/routes/index.ts

@@ -190,6 +190,24 @@ export const DataWarehousePlanningRoute: AppRouteRecordRaw = {
         icon: '',
       },
     },
+    {
+      path: 'logicalModel/version-comparison',
+      name: 'logicalVersionComparisonModel',
+      component: () => import('@/views/dataWarehousePlanning/logicalModel/modelDetail/versionComparison/index.vue'),
+      meta: {
+        title: '版本对比',
+        icon: '',
+      },
+    },
+    {
+      path: 'logicalModel/ERchart',
+      name: 'logicalChartModel',
+      component: () => import('@/views/dataWarehousePlanning/logicalModel/modelDetail/ERchart/index.vue'),
+      meta: {
+        title: '实体关系图',
+        icon: '',
+      },
+    },
   ],
 };
 
@@ -214,15 +232,6 @@ export const DataWarehousephysicalModelRoute: AppRouteRecordRaw = {
         icon: '',
       },
     },
-    {
-      path: 'logicalModel/version-comparison',
-      name: 'logicalVersionComparisonModel',
-      component: () => import('@/views/dataWarehousePlanning/logicalModel/modelDetail/versionComparison/index.vue'),
-      meta: {
-        title: '版本对比',
-        icon: '',
-      },
-    },
   ],
 };
 export const ModelRoute: AppRouteRecordRaw = {

src/views/dataWarehousePlanning/logicalModel/modelDetail/ERchart/chart.data.ts

+import { TreeItem } from '@/components/Tree';
+
+export const chartTreeData: TreeItem[] = [
+  {
+    title: '实体',
+    key: '0-0',
+    children: [
+      { title: 'dw_产品合约行情历史', icon: 'ion:cube-outline', key: '0-0-0' },
+      { title: 'dw_合约', icon: 'ion:cube-outline', key: '0-0-1' },
+      { title: 'dw会员客户合约盈亏每日深汇', icon: 'ion:cube-outline', key: '0-0-2' },
+    ],
+  },
+  {
+    title: '关联',
+    key: '0-0',
+    children: [
+      { title: '合约_行情', icon: 'ion:git-merge-outline', key: '0-0-0' },
+      { title: 'DM_DW关联', icon: 'ion:git-merge-outline', key: '0-0-1' },
+    ],
+  },
+];

src/views/dataWarehousePlanning/logicalModel/modelDetail/ERchart/index.vue

+<template>
+  <PageWrapper title="实体关系图" contentBackground headerSticky>
+    <template #extra>
+      <RadioButtonGroup :options="options" v-model:value="selectRadio" />
+      <a-button type="primary">刷新</a-button>
+      <a-button type="primary">全屏</a-button>
+    </template>
+    <template #footer>
+      <div style="display: flex">
+        <div style="flex: 1">
+          <BasicTree search="true" :treeData="chartTreeData" />
+        </div>
+        <div style="flex: 4">
+          <img src="../../../../../assets/images/ERchart.jpg" class="erchart-img" />
+        </div>
+      </div>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { PageWrapper } from '@/components/Page';
+  import { RadioButtonGroup } from '@/components/Form';
+  import { BasicTree } from '@/components/Tree';
+  import { ref } from 'vue';
+  import { chartTreeData } from './chart.data';
+
+  // const options = [
+  //   {
+  //     label: '全部实体',
+  //     value: '1',
+  //   },
+  //   {
+  //     label: '当前模型实体',
+  //     value: '当前模型实体',
+  //   },
+  // ];
+  const selectRadio = ref('全部实体');
+  const options = ['全部实体', '当前模型实体'];
+</script>
+
+<style scoped>
+  .erchart-img {
+    height: calc(100vh - 200px);
+  }
+</style>

src/views/dataWarehousePlanning/logicalModel/modelDetail/index.vue

@@ -5,7 +5,9 @@
         >转物理模型</a-button
       >
       <a-button type="primary" v-if="!editFlag" @click="handleVersion">版本管理</a-button>
-      <a-button type="primary" v-if="!editFlag" :disabled="!info">ER图</a-button>
+      <a-button type="primary" v-if="!editFlag" @click="handleChart" :disabled="!info"
+        >ER图</a-button
+      >
       <a-button type="primary" v-if="!editFlag" @click="handleExport">导出</a-button>
       <a-button type="primary" v-if="!editFlag" @click="handleEdit">编辑</a-button>
       <a-button type="primary" v-if="!editFlag">删除</a-button>
@@ -105,7 +107,7 @@
 <script lang="ts" setup>
   import { reactive, onMounted, ref, nextTick } from 'vue';
   import { PageWrapper } from '@/components/Page';
-  import { useRoute, onBeforeRouteLeave } from 'vue-router';
+  import { useRoute, onBeforeRouteLeave, useRouter } from 'vue-router';
   import { useFilterStore } from '@/store/modules/filterData';
   import { Descriptions, Tabs, Select } from 'ant-design-vue';
   import EntityTable from './entityTable.vue';
@@ -120,6 +122,7 @@
 
   const [turnPhysicalModal, { openModal: turnPhysical }] = useModal();
   const [versionDetailModal, { openModal: versionDetail }] = useModal();
+  const { push } = useRouter();
   defineOptions({ name: 'AccountManagement' });
   const tableRefresh = ref(true);
   const filterStore = useFilterStore();
@@ -223,6 +226,11 @@
       isUpdate: false,
     });
   }
+  function handleChart() {
+    push({
+      path: '/dataWarehousePlanning/logicalModel/ERchart',
+    });
+  }
   /**
    * 导出
    */