元数据-统计概览

src/views/metadata/index.vue

 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
     <GroupTree class="w-1/3 xl:w-2/9" @select="onNodeSelect" />
-    <BasicTable @register="registerTable" class="w-2/3 xl:w-7/9" :searchInfo="searchInfo">
-      <template #toolbar>
-        <a-button type="primary" @click="handleManage">存储管理</a-button>
-      </template>
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'dataSourceStatus'">
-          <Tag color="error" v-if="record.dataSourceStatus === '0'">数据待采集</Tag>
+    <div class="w-2/3 xl:w-7/9">
+      <div class="charts-container">
+        <!-- 图表容器 -->
+        <div id="chart1" class="chart"></div>
+        <div style="margin-right: 15px" id="chart2" class="chart"></div>
+      </div>
+      <BasicTable @register="registerTable" :searchInfo="searchInfo">
+        <template #toolbar>
+          <a-button type="primary" @click="handleManage">存储管理</a-button>
         </template>
-        <template v-if="column.key === 'dataSourceStatus'">
-          <Tag color="warning" v-if="record.dataSourceStatus === '1'">数据采集中</Tag>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'dataSourceStatus'">
+            <Tag color="error" v-if="record.dataSourceStatus === '0'">数据待采集</Tag>
+          </template>
+          <template v-if="column.key === 'dataSourceStatus'">
+            <Tag color="warning" v-if="record.dataSourceStatus === '1'">数据采集中</Tag>
+          </template>
+          <template v-if="column.key === 'dataSourceStatus'">
+            <Tag color="success" v-if="record.dataSourceStatus === '2'">采集已完成</Tag>
+          </template>
         </template>
-        <template v-if="column.key === 'dataSourceStatus'">
-          <Tag color="success" v-if="record.dataSourceStatus === '2'">采集已完成</Tag>
+        <template #name="{ text, record }">
+          <a @click="handleCreate(record)"> {{ text }}</a>
         </template>
-      </template>
-      <template #name="{ text, record }">
-        <a @click="handleCreate(record)"> {{ text }}</a>
-      </template>
-    </BasicTable>
+      </BasicTable>
+    </div>
     <MetaDataModal @register="registerModal" @success="handleSuccess" />
   </PageWrapper>
 </template>
@@ -34,8 +41,9 @@
   import { useFilterStore } from '@/store/modules/filterData';
   import { sourceColumns, sourceSearchFormSchema } from '@/views/metadata/data';
   import GroupTree from '@/views/metadata/GroupTree.vue';
-  import { metadataData } from '@/views/metadata/metadataData';
+  import { fieldChangeData, metadataData, tableChangeData } from '@/views/metadata/metadataData';
   import MetaDataModal from '@/views/metadata/metaDataModal.vue';
+  import * as echarts from 'echarts';
 
   defineOptions({ name: 'Metadata' });
 
@@ -129,8 +137,67 @@
   function handleManage() {
     createMessage.warning('暂未完成，敬请期待');
   }
+  function initCharts() {
+    // 获取图表容器
+    const chart1Container = document.getElementById('chart1');
+    const chart2Container = document.getElementById('chart2');
+
+    // 初始化图表实例
+    const chart1Instance = echarts.init(chart1Container);
+    const chart2Instance = echarts.init(chart2Container);
+
+    // 设置图表选项
+    chart1Instance.setOption({
+      title: {
+        text: '数据表变更趋势图',
+      },
+      tooltip: {},
+      xAxis: {
+        data: tableChangeData.map((item) => item.date),
+      },
+      yAxis: {
+        min: 0, // 设置 Y 轴的最小值
+        max: 250,
+        splitNumber: 5,
+      },
+      series: [
+        {
+          name: '数据表变更',
+          type: 'line',
+          color: '#cacaec',
+          areaStyle: { color: '#dcd4ec' },
+          data: tableChangeData.map((item) => item.value),
+        },
+      ],
+    });
+
+    chart2Instance.setOption({
+      title: {
+        text: '字段变更趋势图',
+      },
+      tooltip: {},
+      xAxis: {
+        data: fieldChangeData.map((item) => item.date),
+      },
+      yAxis: {
+        min: 0, // 设置 Y 轴的最小值
+        // max: 1000,
+        splitNumber: 5,
+      },
+      series: [
+        {
+          name: '字段变更',
+          type: 'line',
+          color: '#f9e1c1',
+          areaStyle: { color: '#fbf0e0' },
+          data: fieldChangeData.map((item) => item.value),
+        },
+      ],
+    });
+  }
   onMounted(() => {
     tableData.value = metadataData;
+    initCharts();
     const path = route.path;
     if (filterStore.getSearchParams[path]) {
       if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
@@ -158,46 +225,19 @@
     });
     next(); // 允许导航
   });
+</script>
 
-  function fetchChartData(timeRange) {
-    // 假设这是从服务器获取数据的方法
-    this.databaseChartOption = {
-      xAxis: {
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-      },
-      yAxis: {},
-      series: [
-        {
-          name: '直接访问',
-          type: 'line',
-          data: [150, 230, 224, 218, 135, 147, 260],
-        },
-      ],
-    };
-    this.renderChart('databaseChart');
-  }
-
-  function fetchFieldChartData(timeRange) {
-    // 假设这是从服务器获取数据的方法
-    this.fieldChartOption = {
-      xAxis: {
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-      },
-      yAxis: {},
-      series: [
-        {
-          name: '直接访问',
-          type: 'line',
-          data: [150, 230, 224, 218, 135, 147, 260],
-        },
-      ],
-    };
-    this.renderChart('fieldChart');
+<style scoped>
+  .charts-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
   }
 
-  function renderChart(chartId) {
-    let chartDom = document.getElementById(chartId);
-    let myChart = echarts.init(chartDom);
-    myChart.setOption(this[`${chartId}Option`]);
+  .chart {
+    margin: 20px 0 0 15px;
+    width: calc(50% - 10px); /* 确保两个图表并排显示 */
+    height: 400px;
+    background-color: white;
   }
-</script>
+</style>

src/views/metadata/metadataData.ts

@@ -378,4 +378,23 @@ export const tbData: any[] = [
   },
 ];
 
+export const tableChangeData = [
+  { date: '2023-06-14', value: 200 },
+  { date: '2023-06-15', value: 200 },
+  { date: '2023-06-16', value: 200 },
+  { date: '2023-06-17', value: 200 },
+  { date: '2023-06-18', value: 200 },
+  { date: '2023-06-19', value: 200 },
+  { date: '2023-06-20', value: 200 },
+];
+export const fieldChangeData = [
+  { date: '2023-06-14', value: 1000 },
+  { date: '2023-06-15', value: 1000 },
+  { date: '2023-06-16', value: 1000 },
+  { date: '2023-06-17', value: 1000 },
+  { date: '2023-06-18', value: 1000 },
+  { date: '2023-06-19', value: 1000 },
+  { date: '2023-06-20', value: 1000 },
+];
+
 export const accountFormSchema: any[] = [];