Merge remote-tracking branch 'origin/master'

src/components/Application/src/AppLocalePicker.vue

@@ -3,19 +3,19 @@
  * @Description: Multi-language switching component
 -->
 <template>
-  <Dropdown
-    placement="bottom"
-    :trigger="['click']"
-    :dropMenuList="localeList"
-    :selectedKeys="selectedKeys"
-    @menu-event="handleMenuEvent"
-    overlayClassName="app-locale-picker-overlay"
-  >
-    <span class="cursor-pointer flex items-center">
-      <Icon icon="ion:language" />
-      <span v-if="showText" class="ml-1">{{ getLocaleText }}</span>
-    </span>
-  </Dropdown>
+<!--  <Dropdown-->
+<!--    placement="bottom"-->
+<!--    :trigger="['click']"-->
+<!--    :dropMenuList="localeList"-->
+<!--    :selectedKeys="selectedKeys"-->
+<!--    @menu-event="handleMenuEvent"-->
+<!--    overlayClassName="app-locale-picker-overlay"-->
+<!--  >-->
+<!--    <span class="cursor-pointer flex items-center">-->
+<!--      <Icon icon="ion:language" />-->
+<!--      <span v-if="showText" class="ml-1">{{ getLocaleText }}</span>-->
+<!--    </span>-->
+<!--  </Dropdown>-->
 </template>
 <script lang="ts" setup>
   import type { LocaleType } from '#/config';

src/components/Application/src/search/AppSearch.vue

@@ -8,26 +8,26 @@
   export default defineComponent({
     name: 'AppSearch',
     setup() {
-      const showModal = ref(false);
-      const { t } = useI18n();
+      // const showModal = ref(false);
+      // const { t } = useI18n();
+      //
+      // function changeModal(show: boolean) {
+      //   showModal.value = show;
+      // }
 
-      function changeModal(show: boolean) {
-        showModal.value = show;
-      }
-
-      return () => {
-        return (
-          <div class="p-1" onClick={changeModal.bind(null, true)}>
-            <Tooltip>
-              {{
-                title: () => t('common.searchText'),
-                default: () => <SearchOutlined />,
-              }}
-            </Tooltip>
-            <AppSearchModal onClose={changeModal.bind(null, false)} visible={unref(showModal)} />
-          </div>
-        );
-      };
+      // return () => {
+      //   return (
+      //     <div class="p-1" onClick={changeModal.bind(null, true)}>
+      //       <Tooltip>
+      //         {{
+      //           title: () => t('common.searchText'),
+      //           default: () => <SearchOutlined />,
+      //         }}
+      //       </Tooltip>
+      //       <AppSearchModal onClose={changeModal.bind(null, false)} visible={unref(showModal)} />
+      //     </div>
+      //   );
+      // };
     },
   });
 </script>

src/layouts/default/header/components/UpgradePrompt.vue

@@ -44,8 +44,9 @@
     <a-button type="primary" @click="handleSelect(4)" style="margin-right: 10px">{{
       t('layout.header.model4')
     }}</a-button>
-    <a-button type="primary" @click="handleClick">{{
-      t('layout.header.upgrade-prompt.ok-text')
-    }}</a-button>
+<!--    前往体验新版-->
+<!--    <a-button type="primary" @click="handleClick">{{-->
+<!--      t('layout.header.upgrade-prompt.ok-text')-->
+<!--    }}</a-button>-->
   </div>
 </template>

src/layouts/default/header/components/notify/index.vue

 <template>
   <div :class="prefixCls">
-    <Popover title="" trigger="click" :overlayClassName="`${prefixCls}__overlay`">
-      <Badge :count="count" dot :numberStyle="numberStyle">
-        <BellOutlined />
-      </Badge>
-      <template #content>
-        <Tabs>
-          <template v-for="item in listData" :key="item.key">
-            <Tabs.TabPane>
-              <template #tab>
-                {{ item.name }}
-                <span v-if="item.list.length !== 0">({{ item.list.length }})</span>
-              </template>
-              <!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
-              <NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
-              <NoticeList :list="item.list" v-else />
-            </Tabs.TabPane>
-          </template>
-        </Tabs>
-      </template>
-    </Popover>
+<!--    <Popover title="" trigger="click" :overlayClassName="`${prefixCls}__overlay`">-->
+<!--      <Badge :count="count" dot :numberStyle="numberStyle">-->
+<!--        <BellOutlined />-->
+<!--      </Badge>-->
+<!--      <template #content>-->
+<!--        <Tabs>-->
+<!--          <template v-for="item in listData" :key="item.key">-->
+<!--            <Tabs.TabPane>-->
+<!--              <template #tab>-->
+<!--                {{ item.name }}-->
+<!--                <span v-if="item.list.length !== 0">({{ item.list.length }})</span>-->
+<!--              </template>-->
+<!--              &lt;!&ndash; 绑定title-click事件的通知列表中标题是“可点击”的&ndash;&gt;-->
+<!--              <NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />-->
+<!--              <NoticeList :list="item.list" v-else />-->
+<!--            </Tabs.TabPane>-->
+<!--          </template>-->
+<!--        </Tabs>-->
+<!--      </template>-->
+<!--    </Popover>-->
   </div>
 </template>
 <script lang="ts" setup>

src/layouts/default/header/components/user-dropdown/index.vue

@@ -11,25 +11,25 @@
 
     <template #overlay>
       <Menu @click="handleMenuClick">
-        <MenuItem
-          key="doc"
-          :text="t('layout.header.dropdownItemDoc')"
-          icon="ion:document-text-outline"
-          v-if="getShowDoc"
-        />
+<!--        <MenuItem-->
+<!--          key="doc"-->
+<!--          :text="t('layout.header.dropdownItemDoc')"-->
+<!--          icon="ion:document-text-outline"-->
+<!--          v-if="getShowDoc"-->
+<!--        />-->
         <Menu.Divider v-if="getShowDoc" />
-        <MenuItem
-          v-if="getShowApi"
-          key="api"
-          :text="t('layout.header.dropdownChangeApi')"
-          icon="ant-design:swap-outlined"
-        />
-        <MenuItem
-          v-if="getUseLockPage"
-          key="lock"
-          :text="t('layout.header.tooltipLock')"
-          icon="ion:lock-closed-outline"
-        />
+<!--        <MenuItem-->
+<!--          v-if="getShowApi"-->
+<!--          key="api"-->
+<!--          :text="t('layout.header.dropdownChangeApi')"-->
+<!--          icon="ant-design:swap-outlined"-->
+<!--        />-->
+<!--        <MenuItem-->
+<!--          v-if="getUseLockPage"-->
+<!--          key="lock"-->
+<!--          :text="t('layout.header.tooltipLock')"-->
+<!--          icon="ion:lock-closed-outline"-->
+<!--        />-->
         <MenuItem
           key="logout"
           :text="t('layout.header.dropdownItemLoginOut')"

src/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab2.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <!-- <div class="modal_top">
+      <div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
+      <div>
+        <div class="title">{{ formParams.fieldName }}</div>
+        <div class="path">{{ formParams.path }}</div>
+      </div>
+    </div> -->
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './classificationAndGrading.data';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const formParams = ref('');
+  const title = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    isUpdate.value = data.isUpdate;
+    if (data.isUpdate === false) {
+      title.value = '新增分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
+        { field: 'level', required: true, componentProps: { disabled: false } },
+      ]);
+    } else {
+      title.value = '编辑分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: false, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: false, componentProps: { disabled: false } },
+        { field: 'level', required: false, componentProps: { disabled: false } },
+      ]);
+    }
+    setModalProps({ confirmLoading: false });
+    formParams.value = data.record;
+    setFieldsValue({
+      ...data.record,
+    });
+  });
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      if (isUpdate.value) {
+        createMessage.success('编辑成功');
+      }
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modal_top {
+    display: flex;
+    align-items: center;
+    padding: 0 0 20px 20px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+</style>

src/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab3.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <!-- <div class="modal_top">
+      <div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
+      <div>
+        <div class="title">{{ formParams.fieldName }}</div>
+        <div class="path">{{ formParams.path }}</div>
+      </div>
+    </div> -->
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './classificationAndGrading.data';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const formParams = ref('');
+  const title = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    isUpdate.value = data.isUpdate;
+    if (data.isUpdate === false) {
+      title.value = '新增分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
+        { field: 'level', required: true, componentProps: { disabled: false } },
+      ]);
+    } else {
+      title.value = '编辑分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: false, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: false, componentProps: { disabled: false } },
+        { field: 'level', required: false, componentProps: { disabled: false } },
+      ]);
+    }
+    setModalProps({ confirmLoading: false });
+    formParams.value = data.record;
+    setFieldsValue({
+      ...data.record,
+    });
+  });
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      if (isUpdate.value) {
+        createMessage.success('编辑成功');
+      }
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modal_top {
+    display: flex;
+    align-items: center;
+    padding: 0 0 20px 20px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+</style>

src/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab4.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <!-- <div class="modal_top">
+      <div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
+      <div>
+        <div class="title">{{ formParams.fieldName }}</div>
+        <div class="path">{{ formParams.path }}</div>
+      </div>
+    </div> -->
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './classificationAndGrading.data';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const formParams = ref('');
+  const title = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    isUpdate.value = data.isUpdate;
+    if (data.isUpdate === false) {
+      title.value = '新增分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
+        { field: 'level', required: true, componentProps: { disabled: false } },
+      ]);
+    } else {
+      title.value = '编辑分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: false, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: false, componentProps: { disabled: false } },
+        { field: 'level', required: false, componentProps: { disabled: false } },
+      ]);
+    }
+    setModalProps({ confirmLoading: false });
+    formParams.value = data.record;
+    setFieldsValue({
+      ...data.record,
+    });
+  });
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      if (isUpdate.value) {
+        createMessage.success('编辑成功');
+      }
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modal_top {
+    display: flex;
+    align-items: center;
+    padding: 0 0 20px 20px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+</style>

src/views/dataService/APIIntegrationSecurity/AccessControl/ClassificationAndGradingModaltab5.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <!-- <div class="modal_top">
+      <div><Icon icon="ant-design:hdd-outlined" :size="30" :color="'#1091FE'" /></div>
+      <div>
+        <div class="title">{{ formParams.fieldName }}</div>
+        <div class="path">{{ formParams.path }}</div>
+      </div>
+    </div> -->
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './classificationAndGrading.data';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const formParams = ref('');
+  const title = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    isUpdate.value = data.isUpdate;
+    if (data.isUpdate === false) {
+      title.value = '新增分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: true, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: true, componentProps: { disabled: false } },
+        { field: 'level', required: true, componentProps: { disabled: false } },
+      ]);
+    } else {
+      title.value = '编辑分类分级';
+      updateSchema([
+        { field: 'sensitiveState', required: false, componentProps: { disabled: false } },
+        { field: 'sensitiveType', required: false, componentProps: { disabled: false } },
+        { field: 'level', required: false, componentProps: { disabled: false } },
+      ]);
+    }
+    setModalProps({ confirmLoading: false });
+    formParams.value = data.record;
+    setFieldsValue({
+      ...data.record,
+    });
+  });
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      if (isUpdate.value) {
+        createMessage.success('编辑成功');
+      }
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modal_top {
+    display: flex;
+    align-items: center;
+    padding: 0 0 20px 20px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+</style>

src/views/dataService/APIIntegrationSecurity/AccessControl/mock.ts

@@ -7,6 +7,10 @@ export const tableList: any[] = [
     ip: '127.0.0.1',
     protectAction: '阻断',
     markTime: '2023-12-08 15:27:07',
+    fieldName: 'user',
+    featureTraffic: '1000',
+    api: 'login',
+    url: 'https://www.badu.com',
   },
   {
     id: '2',
@@ -14,6 +18,10 @@ export const tableList: any[] = [
     ip: '127.0.0.1',
     protectAction: '阻断',
     markTime: '2023-12-08 15:06:44',
+    fieldName: 'user',
+    featureTraffic: '1000',
+    api: 'login',
+    url: 'https://www.badu.com',
   },
   {
     id: '3',
@@ -21,6 +29,10 @@ export const tableList: any[] = [
     ip: '127.0.0.1',
     protectAction: '阻断',
     markTime: '2023-12-08 15:48:56',
+    fieldName: 'user',
+    featureTraffic: '1000',
+    api: 'login',
+    url: 'https://www.badu.com',
   },
   {
     id: '4',
@@ -28,5 +40,9 @@ export const tableList: any[] = [
     ip: '127.0.0.1',
     protectAction: '阻断',
     markTime: '2023-12-08 15:27:07',
+    fieldName: 'user',
+    featureTraffic: '1000',
+    api: 'login',
+    url: 'https://www.badu.com',
   },
 ];

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,7 +8,11 @@
         <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
@@ -50,7 +53,6 @@
           </div>
         </div>
       </div>
-
     </template>
   </PageWrapper>
 </template>
@@ -80,7 +82,7 @@
   const APIRate = ref('375');
   const [
     registerTable,
-    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+    { reload, updateTableDataRecord, setTableData, getSearchInfo, getForm, getRowSelection },
   ] = useTable({
     title: '执行中请求',
     scroll: { y: 500 },
@@ -125,27 +127,12 @@
     },
   });
 
-  function handleImport() {
-    openImportModal(true, {});
-  }
-
   function handleLog() {
     router.push({
       path: '/dataService/serviceMonitor/useLog',
     });
   }
 
-  function handleDeleteIds() {
-    createConfirm({
-      iconType: 'warning',
-      title: '确认删除',
-      content: '确认批量删除选中数据吗？',
-      onOk() {
-        createMessage.success('批量删除成功!');
-      },
-    });
-  }
-
   /** 部门树的select*/
   function handleSelect(key) {
     if (key !== null && key !== undefined) {

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 },
   },
 ];