修改API监控

src/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData.ts

-import {getAllRoleList} from '@/api/system/role/role';
+import { getAllRoleList } from '@/api/system/role/role';
 import { BasicColumn, FormSchema } from '@/components/Table';
-import {h} from "vue";
-import {Tag} from "ant-design-vue";
-import { Switch } from 'ant-design-vue';
-import {useMessage} from "@/hooks/web/useMessage";
-import {changeFlagApi} from "@/api/system/user/user"; // 引入开关组件
+import { h } from 'vue';
+import { Tag, Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+// 引入开关组件
 type CheckedType = boolean | string | number;
 
 export const TreeData: any[] = [
   {
-    "delFlag" : "0",
-    "flag" : "1",
-    "businessId" : 100,
-    "institutionName" : "机构管理",
-    "anotherName":"机构管理",
-    "parentId" : 0,
-    "code": "DataGovernanceDep_product1",
-    "ancestors" : "0",
-    "orderNum" : 0,
-    "children" : [ ],
-    "selectType" : null,
+    delFlag: '0',
+    flag: '1',
+    businessId: 100,
+    institutionName: '机构管理',
+    anotherName: '机构管理',
+    parentId: 0,
+    code: 'DataGovernanceDep_product1',
+    ancestors: '0',
+    orderNum: 0,
+    children: [],
+    selectType: null,
     icon: 'ion:settings-outline',
   },
   {
-    "delFlag" : "0",
-    "flag" : "1",
-    "businessId" : 101,
-    "institutionName" : "数据平台治理部",
-    "anotherName":"数据平台治理部",
-    "parentId" : 100,
-    "code": "DataGovernanceDep_product2",
-    "ancestors" : "0,100",
-    "orderNum" : 1,
-    "children" : [ ],
-    "selectType" : null,
+    delFlag: '0',
+    flag: '1',
+    businessId: 101,
+    institutionName: '数据平台治理部',
+    anotherName: '数据平台治理部',
+    parentId: 100,
+    code: 'DataGovernanceDep_product2',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
     icon: 'ion:settings-outline',
   },
   {
-    "delFlag" : "0",
-    "flag" : "1",
-    "businessId" : 107,
-    "institutionName" : "数据资源管理部",
-    "anotherName":"数据资源管理部",
-    "parentId" : 100,
-    "code": "DataGovernanceDep_product3",
-    "ancestors" : "0,100",
-    "orderNum" : 2,
-    "children" : [ ],
-    "selectType" : null,
+    delFlag: '0',
+    flag: '1',
+    businessId: 107,
+    institutionName: '数据资源管理部',
+    anotherName: '数据资源管理部',
+    parentId: 100,
+    code: 'DataGovernanceDep_product3',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
     icon: 'ion:settings-outline',
   },
   {
-    "delFlag" : "0",
-    "flag" : "1",
-    "businessId" : 102,
-    "institutionName" : "研发部门",
-    "anotherName":"研发部门",
-    "parentId" : 101,
-    "code": "DataGovernanceDep_product4",
-    "ancestors" : "0,100,101",
-    "orderNum" : 1,
-    "children" : [ ],
-    "selectType" : null,
+    delFlag: '0',
+    flag: '1',
+    businessId: 102,
+    institutionName: '研发部门',
+    anotherName: '研发部门',
+    parentId: 101,
+    code: 'DataGovernanceDep_product4',
+    ancestors: '0,100,101',
+    orderNum: 1,
+    children: [],
+    selectType: null,
     icon: 'ion:settings-outline',
   },
   {
-    "delFlag" : "0",
-    "flag" : "1",
-    "businessId" : 103,
-    "institutionName" : "市场部门",
-    "anotherName":"市场部门",
-    "parentId" : 101,
-    "code": "DataGovernanceDep_product5",
-    "ancestors" : "0,100,101",
-    "orderNum" : 2,
-    "children" : [ ],
-    "selectType" : null,
+    delFlag: '0',
+    flag: '1',
+    businessId: 103,
+    institutionName: '市场部门',
+    anotherName: '市场部门',
+    parentId: 101,
+    code: 'DataGovernanceDep_product5',
+    ancestors: '0,100,101',
+    orderNum: 2,
+    children: [],
+    selectType: null,
     icon: 'ion:settings-outline',
   },
   {
-    "delFlag" : "0",
-    "flag" : "1",
-    "businessId" : 104,
-    "institutionName" : "测试部门",
-    "anotherName":"测试部门",
-    "parentId" : 101,
-    "code": "DataGovernanceDep_product6",
-    "ancestors" : "0,100,101",
-    "orderNum" : 3,
-    "children" : [ ],
-    "selectType" : null,
+    delFlag: '0',
+    flag: '1',
+    businessId: 104,
+    institutionName: '测试部门',
+    anotherName: '测试部门',
+    parentId: 101,
+    code: 'DataGovernanceDep_product6',
+    ancestors: '0,100,101',
+    orderNum: 3,
+    children: [],
+    selectType: null,
     icon: 'ion:settings-outline',
   },
   {
-    "delFlag" : "0",
-    "flag" : "1",
-    "businessId" : 105,
-    "institutionName" : "财务部门",
-    "anotherName":"财务部门",
-    "parentId" : 101,
-    "code": "DataGovernanceDep_product7",
-    "ancestors" : "0,100,101",
-    "orderNum" : 4,
-    "children" : [ ],
-    "selectType" : null,
+    delFlag: '0',
+    flag: '1',
+    businessId: 105,
+    institutionName: '财务部门',
+    anotherName: '财务部门',
+    parentId: 101,
+    code: 'DataGovernanceDep_product7',
+    ancestors: '0,100,101',
+    orderNum: 4,
+    children: [],
+    selectType: null,
     icon: 'ion:settings-outline',
   },
   {
-    "delFlag" : "0",
-    "flag" : "1",
-    "businessId" : 106,
-    "institutionName" : "运维部门",
-    "anotherName":"运维部门",
-    "parentId" : 101,
-    "code": "DataGovernanceDep_product8",
-    "ancestors" : "0,100,101",
-    "orderNum" : 5,
-    "children" : [ ],
-    "selectType" : null,
+    delFlag: '0',
+    flag: '1',
+    businessId: 106,
+    institutionName: '运维部门',
+    anotherName: '运维部门',
+    parentId: 101,
+    code: 'DataGovernanceDep_product8',
+    ancestors: '0,100,101',
+    orderNum: 5,
+    children: [],
+    selectType: null,
     icon: 'ion:settings-outline',
   },
   {
-    "delFlag" : "0",
-    "flag" : "1",
-    "businessId" : 202,
-    "institutionName" : "数据部门",
-    "anotherName":"数据部门",
-    "parentId" : 107,
-    "code": "DataGovernanceDep_product9",
-    "ancestors" : "0,100,107",
-    "orderNum" : 1,
-    "children" : [ ],
-    "selectType" : null,
+    delFlag: '0',
+    flag: '1',
+    businessId: 202,
+    institutionName: '数据部门',
+    anotherName: '数据部门',
+    parentId: 107,
+    code: 'DataGovernanceDep_product9',
+    ancestors: '0,100,107',
+    orderNum: 1,
+    children: [],
+    selectType: null,
     icon: 'ion:settings-outline',
   },
   {
-    "delFlag" : "0",
-    "flag" : "0",
-    "businessId" : 203,
-    "institutionName" : "检查部门",
-    "anotherName":"检查部门",
-    "parentId" : 107,
-    "code": "DataGovernanceDep_product10",
-    "ancestors" : "0,100,107",
-    "orderNum" : 2,
-    "children" : [ ],
-    "selectType" : null,
+    delFlag: '0',
+    flag: '0',
+    businessId: 203,
+    institutionName: '检查部门',
+    anotherName: '检查部门',
+    parentId: 107,
+    code: 'DataGovernanceDep_product10',
+    ancestors: '0,100,107',
+    orderNum: 2,
+    children: [],
+    selectType: null,
     icon: 'ion:settings-outline',
   },
 ];
 export const TableData: any[] = [
-  {gateway: 'gw-001', executor: 'exec-001', caller: 'user-001', startTime: '2024-11-30 13:05:05', consume: '1s'},
-  {gateway: 'gw-002', executor: 'exec-002', caller: 'user-002', startTime: '2024-11-30 13:10:08', consume: '2s'},
-  {gateway: 'gw-003', executor: 'exec-003', caller: 'user-003', startTime: '2024-11-30 13:20:09', consume: '3s'},
-  {gateway: 'gw-004', executor: 'exec-004', caller: 'user-004', startTime: '2024-11-30 13:25:10', consume: '4s'},
-  {gateway: 'gw-005', executor: 'exec-005', caller: 'user-005', startTime: '2024-11-30 13:30:11', consume: '5s'},
-  {gateway: 'gw-006', executor: 'exec-006', caller: 'user-006', startTime: '2024-11-30 13:35:12', consume: '6s'},
-  {gateway: 'gw-007', executor: 'exec-007', caller: 'user-007', startTime: '2024-11-30 13:40:13', consume: '7s'},
-  {gateway: 'gw-008', executor: 'exec-008', caller: 'user-008', startTime: '2024-11-30 13:45:14', consume: '8s'},
-  {gateway: 'gw-009', executor: 'exec-009', caller: 'user-009', startTime: '2024-11-30 13:50:15', consume: '9s'},
-  {gateway: 'gw-010', executor: 'exec-010', caller: 'user-010', startTime: '2024-11-30 13:55:16', consume: '10s'}
-]
-
+  {
+    gateway: 'gw-001',
+    executor: 'exec-001',
+    caller: 'user-001',
+    startTime: '2024-11-30 13:05:05',
+    consume: '1s',
+  },
+  {
+    gateway: 'gw-002',
+    executor: 'exec-002',
+    caller: 'user-002',
+    startTime: '2024-11-30 13:10:08',
+    consume: '2s',
+  },
+  {
+    gateway: 'gw-003',
+    executor: 'exec-003',
+    caller: 'user-003',
+    startTime: '2024-11-30 13:20:09',
+    consume: '3s',
+  },
+  {
+    gateway: 'gw-004',
+    executor: 'exec-004',
+    caller: 'user-004',
+    startTime: '2024-11-30 13:25:10',
+    consume: '4s',
+  },
+  {
+    gateway: 'gw-005',
+    executor: 'exec-005',
+    caller: 'user-005',
+    startTime: '2024-11-30 13:30:11',
+    consume: '5s',
+  },
+  {
+    gateway: 'gw-006',
+    executor: 'exec-006',
+    caller: 'user-006',
+    startTime: '2024-11-30 13:35:12',
+    consume: '6s',
+  },
+  {
+    gateway: 'gw-007',
+    executor: 'exec-007',
+    caller: 'user-007',
+    startTime: '2024-11-30 13:40:13',
+    consume: '7s',
+  },
+  {
+    gateway: 'gw-008',
+    executor: 'exec-008',
+    caller: 'user-008',
+    startTime: '2024-11-30 13:45:14',
+    consume: '8s',
+  },
+  {
+    gateway: 'gw-009',
+    executor: 'exec-009',
+    caller: 'user-009',
+    startTime: '2024-11-30 13:50:15',
+    consume: '9s',
+  },
+  {
+    gateway: 'gw-010',
+    executor: 'exec-010',
+    caller: 'user-010',
+    startTime: '2024-11-30 13:55:16',
+    consume: '10s',
+  },
+];
+export const totalApiData = [
+  { date: '10/01', value: 3000 },
+  { date: '10/02', value: 4000 },
+  { date: '10/03', value: 3222 },
+  { date: '10/04', value: 4521 },
+  { date: '10/05', value: 3552 },
+  { date: '10/06', value: 4899 },
+  { date: '10/07', value: 4788 },
+];
+export const totalApiSucessData = [
+  { date: '10/01', value: 2212 },
+  { date: '10/02', value: 2122 },
+  { date: '10/03', value: 2402 },
+  { date: '10/04', value: 2468 },
+  { date: '10/05', value: 2487 },
+  { date: '10/06', value: 2888 },
+  { date: '10/07', value: 2322 },
+];
+export const totalApiFailedData = [
+  { date: '10/01', value: 988 },
+  { date: '10/02', value: 888 },
+  { date: '10/03', value: 788 },
+  { date: '10/04', value: 988 },
+  { date: '10/05', value: 688 },
+  { date: '10/06', value: 788 },
+  { date: '10/07', value: 888 },
+];
+export const totalGetApiData = [
+  { date: '10/01', value: 310 },
+  { date: '10/02', value: 322 },
+  { date: '10/03', value: 420 },
+  { date: '10/04', value: 379 },
+  { date: '10/05', value: 489 },
+  { date: '10/06', value: 499 },
+  { date: '10/07', value: 400 },
+];
+export const totalPostApiData = [
+  { date: '10/01', value: 50 },
+  { date: '10/02', value: 89 },
+  { date: '10/03', value: 78 },
+  { date: '10/04', value: 66 },
+  { date: '10/05', value: 180 },
+  { date: '10/06', value: 99 },
+  { date: '10/07', value: 140 },
+];

src/views/dataSharingAndExchange/ApiMonitor/RightContent4.vue

 <template>
-  <Card :loading="loading">
-    4444
-  </Card>
+  <div class="charts-container">
+    <div class="header">
+      <span>API调用统计</span>
+    </div>
+    <div class="charts">
+      <div id="chart1" class="chart"></div>
+      <div id="chart2" class="chart"></div>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { Tag, Card,Select } from 'ant-design-vue';
-import { BasicTable, useTable, TableAction } from '@/components/Table';
-import {} from "./ApiMonitor.data";
-import {} from "./ApiMonitorData";
-import Icon from '@/components/Icon/Icon.vue';
+  import { onMounted } from 'vue';
+  import * as echarts from 'echarts';
+  import {
+    totalApiData,
+    totalApiFailedData,
+    totalApiSucessData,
+    totalGetApiData,
+    totalPostApiData,
+  } from '@/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData';
 
+  onMounted(() => {
+    {
+      // 获取图表容器
+      const chart1Container = document.getElementById('chart1');
+      const chart2Container = document.getElementById('chart2');
 
+      // 初始化图表实例
+      const chart1Instance = echarts.init(chart1Container);
+      const chart2Instance = echarts.init(chart2Container);
+
+      // 设置图表选项
+      chart1Instance.setOption({
+        title: {
+          text: 'API调用统计', // 修改了标题文字
+        },
+        legend: {
+          data: ['总量', '成功', '失败'],
+          top: '8%', // 图例位置调整
+          left: '5%',
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false, // 坐标轴两边留白策略
+          data: totalApiData.map((item) => item.date), // 假设每个数据点有日期属性
+          axisLabel: {
+            rotate: 45, // 旋转x轴标签以避免重叠
+          },
+        },
+        yAxis: {
+          min: 0,
+          max: 5000,
+          splitNumber: 5,
+          nameTextStyle: {
+            padding: [0, 0, 10, 0], // 调整y轴名称与轴线的距离
+          },
+        },
+        series: [
+          {
+            name: '总量',
+            type: 'line',
+            color: '#67a6f1',
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(173,204,236,0.8)', // 顶部颜色较深
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(173,204,236,0)', // 底部颜色透明
+                  },
+                ],
+                global: false,
+              },
+            },
+            data: totalApiData.map((item) => item.value),
+          },
+          {
+            name: '成功',
+            type: 'line',
+            color: '#6fe3e3',
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(153,236,233,0.8)', // 顶部颜色较深
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(153,236,233,0)', // 底部颜色透明
+                  },
+                ],
+                global: false,
+              },
+            },
+            data: totalApiSucessData.map((item) => item.value),
+          },
+          {
+            name: '失败',
+            type: 'line',
+            color: '#90ed7d',
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(144,237,125,0.8)', // 顶部颜色较深
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(144,237,125,0)', // 底部颜色透明
+                  },
+                ],
+                global: false,
+              },
+            },
+            data: totalApiFailedData.map((item) => item.value),
+          },
+        ],
+      });
+
+      chart2Instance.setOption({
+        title: {
+          text: '请求方式调用量', // 修改了标题文字
+        },
+        legend: {
+          data: ['Get', 'Post'],
+          top: '8%', // 图例位置调整
+          left: '5%',
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false, // 坐标轴两边留白策略
+          data: totalApiData.map((item) => item.date), // 假设每个数据点有日期属性
+          axisLabel: {
+            rotate: 45, // 旋转x轴标签以避免重叠
+          },
+        },
+        yAxis: {
+          min: 0,
+          max: 500,
+          splitNumber: 5,
+          nameTextStyle: {
+            padding: [0, 0, 10, 0], // 调整y轴名称与轴线的距离
+          },
+        },
+        series: [
+          {
+            name: 'Get',
+            type: 'line',
+            color: '#f3a770',
+            areaStyle: {
+              color: {
+                type: 'linear', // 渐变类型，可选 'linear' 或 'radial'
+                x: 0, // 渐变起始位置，x轴方向
+                y: 0, // 渐变起始位置，y轴方向
+                x2: 0, // 渐变结束位置，x轴方向
+                y2: 1, // 渐变结束位置，y轴方向
+                colorStops: [
+                  // 颜色停止位
+                  {
+                    offset: 0,
+                    color: 'rgba(246,208,170,0.5)', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(246,208,170,0)', // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: totalGetApiData.map((item) => item.value),
+          },
+          {
+            name: 'Post',
+            type: 'line',
+            color: '#ce9be5',
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(212,184,229,0.5)', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(212,184,229,0)', // 100% 处的颜色
+                  },
+                ],
+                global: false,
+              },
+            },
+            data: totalPostApiData.map((item) => item.value),
+          },
+        ],
+      });
+    }
+  });
 </script>
 <style lang="less" scoped>
+  .charts-container {
+    background-color: white; /* 设置容器背景为白色 */
+    padding: 20px; /* 给容器添加内边距 */
+    border-radius: 10px; /* 可选：给容器添加圆角 */
+    width: 100%; /* 确保容器宽度适应父级元素 */
+  }
+
+  .header {
+    font-size: 20px;
+    margin-bottom: 20px;
+    text-align: left;
+    color: #333;
+  }
+
+  .charts {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+  }
 
+  .chart {
+    width: calc(50% - 10px); /* 确保两个图表并排显示 */
+    height: 400px;
+    background-color: transparent; /* 使图表的背景透明 */
+  }
 </style>

src/views/dataSharingAndExchange/ApiMonitor/RightContent5.vue

 <template>
-  <Card :loading="loading">
-    5555
-  </Card>
+  <div class="charts-container">
+    <div class="header">
+      <span>API调用统计</span>
+    </div>
+    <div class="charts">
+      <div id="chart3" class="chart"></div>
+      <div id="chart4" class="chart"></div>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { Tag, Card,Select } from 'ant-design-vue';
-import { BasicTable, useTable, TableAction } from '@/components/Table';
-import {} from "./ApiMonitor.data";
-import {} from "./ApiMonitorData";
-import Icon from '@/components/Icon/Icon.vue';
+  import { onMounted } from 'vue';
+  import * as echarts from 'echarts';
+  import { fieldChangeData, tableChangeData } from '@/views/metadata/metadataData';
 
+  onMounted(() => {
+    {
+      // 获取图表容器
+      const chart3Container = document.getElementById('chart3');
+      const chart4Container = document.getElementById('chart4');
 
+      // 初始化图表实例
+      const chart3Instance = echarts.init(chart3Container);
+      const chart4Instance = echarts.init(chart4Container);
+
+      // 设置图表选项
+      chart3Instance.setOption({
+        title: {
+          text: '数据表变更趋势图',
+        },
+        tooltip: {},
+        xAxis: {
+          data: tableChangeData.map((item) => item.date),
+          boundaryGap: false, // 数据点与标签对齐
+        },
+        yAxis: {
+          min: 0, // 设置 Y 轴的最小值
+          max: 250,
+          splitNumber: 5,
+        },
+        series: [
+          {
+            name: '数据表变更',
+            type: 'line',
+            color: '#cacaec',
+            areaStyle: { color: '#dcd4ec' },
+            data: tableChangeData.map((item) => item.value),
+          },
+        ],
+      });
+
+      chart4Instance.setOption({
+        title: {
+          text: '字段变更趋势图',
+        },
+        tooltip: {},
+        xAxis: {
+          // axisLabel: {
+          //   interval: 0, // 强制显示所有标签
+          // },
+          data: fieldChangeData.map((item) => item.date),
+          boundaryGap: false, // 数据点与标签对齐
+        },
+        yAxis: {
+          min: 0, // 设置 Y 轴的最小值
+          // max: 1000,
+          splitNumber: 5,
+        },
+        series: [
+          {
+            name: '字段变更',
+            type: 'line',
+            color: '#f9e1c1',
+            areaStyle: { color: '#fbf0e0' },
+            data: fieldChangeData.map((item) => item.value),
+          },
+        ],
+      });
+    }
+  });
 </script>
 <style lang="less" scoped>
+  .charts-container {
+    background-color: white; /* 设置容器背景为白色 */
+    padding: 20px; /* 给容器添加内边距 */
+    border-radius: 10px; /* 可选：给容器添加圆角 */
+    width: 100%; /* 确保容器宽度适应父级元素 */
+  }
+
+  .header {
+    font-size: 20px;
+    margin-bottom: 20px;
+    text-align: left;
+    color: #333;
+  }
+
+  .charts {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+  }
 
+  .chart {
+    width: calc(50% - 10px); /* 确保两个图表并排显示 */
+    height: 400px;
+    background-color: transparent; /* 使图表的背景透明 */
+  }
 </style>