数据服务 概览

src/views/dataService/Overview/ipRank.vue

+<template>
+  <PageWrapper>
+    <BasicTable @register="registerTable" />
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import PageWrapper from '@/components/Page/src/PageWrapper.vue';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { useTable } from '@/components/Table';
+  import { IPTableList } from './viewData';
+  import { IPColumns } from './view.data';
+
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
+    scroll: { y: 500 },
+    api: async (params) => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: IPTableList.length,
+        code: '',
+        message: '',
+        data: IPTableList,
+      };
+
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    rowSelection: false,
+    pagination: false,
+    showIndexColumn: false,
+    columns: IPColumns,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+  });
+</script>
+
+<style scoped></style>

src/views/dataService/Overview/useByRank.vue

+<template>
+  <PageWrapper>
+    <BasicTable @register="registerTable" />
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+import PageWrapper from '@/components/Page/src/PageWrapper.vue';
+import BasicTable from '@/components/Table/src/BasicTable.vue';
+import { useTable } from '@/components/Table';
+import { useByTableList } from './viewData';
+import { useByColumns } from './view.data';
+
+const [
+  registerTable,
+  { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+] = useTable({
+  scroll: { y: 500 },
+  api: async (params) => {
+    const response = {
+      pageNu: '1',
+      pageSize: '10',
+      pages: '1',
+      total: useByTableList.length,
+      code: '',
+      message: '',
+      data: useByTableList,
+    };
+
+    return { ...response };
+  },
+  rowKey: 'businessId',
+  rowSelection: false,
+  pagination: false,
+  showIndexColumn: false,
+  columns: useByColumns,
+  useSearchForm: false,
+  showTableSetting: false,
+  bordered: true,
+}) ;
+</script>
+
+<style scoped></style>

src/views/dataService/Overview/useErrorRank.vue

+<template>
+  <PageWrapper>
+    <BasicTable @register="registerTable" />
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+import PageWrapper from '@/components/Page/src/PageWrapper.vue';
+import BasicTable from '@/components/Table/src/BasicTable.vue';
+import { useTable } from '@/components/Table';
+import { errorTableList } from './viewData';
+import { errorColumns } from './view.data';
+
+const [
+  registerTable,
+  { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+] = useTable({
+  scroll: { y: 500 },
+  api: async (params) => {
+    const response = {
+      pageNu: '1',
+      pageSize: '10',
+      pages: '1',
+      total: errorTableList.length,
+      code: '',
+      message: '',
+      data: errorTableList,
+    };
+
+    return { ...response };
+  },
+  rowKey: 'businessId',
+  rowSelection: false,
+  pagination: false,
+  showIndexColumn: false,
+  columns: errorColumns,
+  useSearchForm: false,
+  showTableSetting: false,
+  bordered: true,
+}) ;
+</script>
+
+<style scoped></style>

src/views/dataService/Overview/useTotalRank.vue

+<template>
+  <PageWrapper>
+    <BasicTable @register="registerTable" />
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+import PageWrapper from '@/components/Page/src/PageWrapper.vue';
+import BasicTable from '@/components/Table/src/BasicTable.vue';
+import { useTable } from '@/components/Table';
+import { totalTableList } from './viewData';
+import { totalColumns } from './view.data';
+
+const [
+  registerTable,
+  { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+] = useTable({
+  scroll: { y: 500 },
+  api: async (params) => {
+    const response = {
+      pageNu: '1',
+      pageSize: '10',
+      pages: '1',
+      total: totalTableList.length,
+      code: '',
+      message: '',
+      data: totalTableList,
+    };
+
+    return { ...response };
+  },
+  rowKey: 'businessId',
+  rowSelection: false,
+  pagination: false,
+  showIndexColumn: false,
+  columns: totalColumns,
+  useSearchForm: false,
+  showTableSetting: false,
+  bordered: true,
+}) ;
+</script>
+
+<style scoped></style>

src/views/dataService/Overview/view.data.ts

+export const totalColumns = [
+  {
+    title: '排名',
+    dataIndex: 'ranking',
+  },
+  {
+    title: 'API名称',
+    dataIndex: 'apiName',
+  },
+  {
+    title: '调用次数',
+    dataIndex: 'useNum',
+  },
+  {
+    title: '响应时间',
+    dataIndex: 'responseTime',
+  },
+];
+
+export const errorColumns = [
+  {
+    title: '排名',
+    dataIndex: 'ranking',
+  },
+  {
+    title: 'API名称',
+    dataIndex: 'apiName',
+  },
+  {
+    title: '调用次数',
+    dataIndex: 'useNum',
+  },
+  {
+    title: '调用失败率',
+    dataIndex: 'useError',
+  },
+  {
+    title: '响应时间',
+    dataIndex: 'responseTime',
+  },
+];
+
+export const useByColumns = [
+  {
+    title: '排名',
+    dataIndex: 'ranking',
+  },
+  {
+    title: '调用方',
+    dataIndex: 'useBy',
+  },
+  {
+    title: '调用次数',
+    dataIndex: 'useNum',
+  },
+];
+
+export const IPColumns = [
+  {
+    title: '排名',
+    dataIndex: 'ranking',
+  },
+  {
+    title: 'IP地址',
+    dataIndex: 'ipAddress',
+  },
+  {
+    title: '调用次数',
+    dataIndex: 'useNum',
+  },
+];

src/views/dataService/Overview/viewData.ts

+export const totalTableList = [
+  {
+    ranking: '1',
+    apiName: 'oracle_sql',
+    useNum: '1次',
+    responseTime: '2030ms',
+  },{
+    ranking: '2',
+    apiName: 'test',
+    useNum: '2次',
+    responseTime: '12ms',
+  },
+];
+
+export const errorTableList = [
+  {
+    ranking: '1',
+    apiName: 'oracle_sql',
+    useNum: '1次',
+    useError: '100%',
+    responseTime: '2030ms',
+  },{
+    ranking: '2',
+    apiName: 'test',
+    useNum: '2次',
+    useError: '0%',
+    responseTime: '12ms',
+  },
+];
+
+export const useByTableList = [
+  {
+    ranking: '1',
+    useBy: 'admin',
+    useNum: '2',
+  },
+  {
+    ranking: '2',
+    useBy: 'user',
+    useNum: '1',
+  },
+];
+
+export const IPTableList = [
+  {
+    ranking: '1',
+    ipAddress: '172.26.5.31',
+    useNum: '2',
+  },
+  {
+    ranking: '2',
+    ipAddress: '172.18.30.18',
+    useNum: '1',
+  },
+];

src/views/dataService/serviceMonitor/index.vue

 <template>
-  <PageWrapper title="供电单位用电量" contentFullHeight fixedHeight >
-
+  <PageWrapper title="供电单位用电量" fixedHeight>
     <template #extra>
       <a-button type="primary" @click="handleLog">调用日志</a-button>
     </template>
@@ -9,16 +8,20 @@
         <ModelTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
         <div class="w-3/4 xl:w-4/5">
           <div style="display: flex; flex-direction: column">
-            <BasicTable @register="registerTable" :searchInfo="searchInfo" :rowSelection="rowSelection">
+            <BasicTable
+              @register="registerTable"
+              :searchInfo="searchInfo"
+              :rowSelection="rowSelection"
+            >
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'action'">
                   <TableAction
                     :actions="[
-                {
-                  icon: 'ant-design:stop-outlined',
-                  onClick: handleEdit.bind(null, record),
-                },
-              ]"
+                      {
+                        icon: 'ant-design:stop-outlined',
+                        onClick: handleEdit.bind(null, record),
+                      },
+                    ]"
                   />
                 </template>
               </template>
@@ -28,20 +31,20 @@
               <div style="display: flex">
                 <div class="w-1/3" style="margin-left: 20px">
                   <div style="border-left: 3px solid #1396e9; margin-top: 20px; font-size: 15px"
-                  >实时总流量</div
+                    >实时总流量</div
                   >
                   <div style="margin-top: 10px; width: 100%; height: 100%; text-align: center">
                     <img src="../../../assets/images/serviceMinotor.png" style="width: 68%" />
                     <div style="font-size: 18px">SLB</div>
                     <div
-                    ><span style="font-size: 23px; font-weight: bold">{{ APIRate }}</span
-                    ><span style="font-size: 18px; margin-left: 5px">MB/S</span></div
+                      ><span style="font-size: 23px; font-weight: bold">{{ APIRate }}</span
+                      ><span style="font-size: 18px; margin-left: 5px">MB/S</span></div
                     >
                   </div>
                 </div>
                 <div class="w-2/3">
                   <div style="border-left: 3px solid #1396e9; font-size: 15px; margin-top: 20px"
-                  >流量统计</div
+                    >流量统计</div
                   >
                   <div id="echarts2" style="width: 100%; height: 300px"></div>
                 </div>
@@ -50,7 +53,6 @@
           </div>
         </div>
       </div>
-
     </template>
   </PageWrapper>
 </template>

src/views/dataService/serviceMonitor/monitor.data.ts

@@ -7,7 +7,7 @@ export const searchFormSchema: FormSchema[] = [
     field: 'APIName',
     label: '调用方',
     component: 'Select',
-    colProps: { span: 4 },
+    colProps: { span: 8 },
     componentProps: {
       options: [
         { value: 'admin', label: 'admin' },
@@ -21,7 +21,7 @@ export const searchFormSchema: FormSchema[] = [
     field: 'callTime',
     label: '调用时间',
     component: 'RangePicker',
-    colProps: { span: 4 },
+    colProps: { span: 8 },
     defaultValue: [moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
     componentProps: {
 
@@ -31,7 +31,7 @@ export const searchFormSchema: FormSchema[] = [
     field: 'callUseTime',
     label: '调用有效期',
     component: 'DatePicker',
-    colProps: { span: 4 },
+    colProps: { span: 8 },
   },
 ];