Merge remote-tracking branch 'origin/master'

src/views/dataSharingAndExchange/ApiMonitor/ApiMonitor.data.ts

+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"; // 引入开关组件
+type CheckedType = boolean | string | number;
+
+
+export const columns1: BasicColumn[] = [
+  {
+    title: 'gateway',
+    dataIndex: 'gateway',
+    width: 150,
+  },
+  {
+    title: 'executor',
+    dataIndex: 'executor',
+    width: 150,
+  },
+  {
+    title: '调用者',
+    dataIndex: 'caller',
+    width: 150,
+  },
+  {
+    title: '开始时间',
+    dataIndex: 'startTime',
+    width: 150,
+  },
+  {
+    title: '已耗时',
+    dataIndex: 'consume',
+    width: 150,
+  },
+];
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'callBy',
+    label: '调用者',
+    component: 'Select',
+    labelWidth:50,
+    componentProps: {
+      options:[
+        {
+          label:'admin',
+          value:'admin'
+        },
+      ],
+      placeholder: '请选择调用者',
+    },
+    colProps: { lg: 5, md: 24 },
+  },
+  {
+    field: 'callTime',
+    label: '  调用时间',
+    labelWidth:100,
+    component: 'DatePicker',
+    colProps: { lg: 7, md: 24 },
+  },
+];
+

src/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData.ts

+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"; // 引入开关组件
+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,
+    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,
+    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,
+    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,
+    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,
+    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,
+    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,
+    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,
+    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,
+    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,
+    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'}
+]
+

src/views/dataSharingAndExchange/ApiMonitor/ApiMonitorTree.vue

+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      title="API监控"
+      ref="treeRef"
+      toolbar
+      search
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="false"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'businessId', title: 'institutionName' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import {h, nextTick, onMounted, ref, unref} from 'vue';
+import {BasicTree, TreeActionItem, TreeActionType, TreeItem} from '@/components/Tree';
+import { getDeptList } from '@/api/system/dept/dept';
+import {Nullable} from "@vben/types";
+import { TreeData } from "@/views/system/institution/institutionData";
+import {Modal} from "ant-design-vue";
+import { useMessage } from '@/hooks/web/useMessage';
+import {useModal} from "@/components/Modal";
+defineOptions({ name: 'DeptTree' });
+
+const emit = defineEmits(['select']);
+const { createMessage } = useMessage();
+const treeData = ref<TreeItem[]>([]);
+const treeRef = ref<Nullable<TreeActionType>>(null);
+const [registerModal, { openModal }] = useModal();
+const [registerMoveTreeModel, { openModal:openMoveTreeModel }] = useModal();
+function getTree() {
+  const tree = unref(treeRef);
+  if (!tree) {
+    throw new Error('tree is null!');
+  }
+  return tree;
+}
+
+async function fetch() {
+    const data = TreeData
+    treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
+  await nextTick(() => {
+    getTree().expandAll(true)
+  })
+  }
+
+function handleTree(data, id, parentId, children, rootId) {
+  id = id || 'id'
+  parentId = parentId || 'parentId'
+  children = children || 'children'
+  rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+  // 对源数据深度克隆
+  const cloneData = JSON.parse(JSON.stringify(data))
+  // 循环所有项
+  const treeData = cloneData.filter(father => {
+    const branchArr = cloneData.filter(child => {
+      // 返回每一项的子级数组
+      return father[id] === child[parentId]
+    })
+    branchArr.length > 0 ? father.children = branchArr : ''
+    // 返回第一层
+    return father[parentId] === rootId
+  })
+  return treeData !== '' ? treeData : data
+}
+
+function handleSelect(keys) {
+  emit('select', keys[0]);
+}
+
+onMounted(() => {
+  fetch();
+});
+
+/** 成功回调函数*/
+function handleSuccess() {
+
+}
+
+
+
+</script>

src/views/dataSharingAndExchange/ApiMonitor/RightContent1.vue

+<template>
+  <div class="center">
+    <div style="display: flex;justify-content: space-between;margin-left: 10px;padding-top: 10px">
+      <div style="display: flex">
+        <Icon icon="dashicons:admin-plugins" style="color: rgb(22, 179, 197);font-size: 30px"></Icon>
+        <div>
+          <span style="font-weight: bold">供电单位用电量</span><br>
+          <span>API监控/市场营销/供电单位用电量</span>
+        </div>
+      </div>
+      <div>
+        <a-button type="primary" style="margin-right: 10px">API详情</a-button>
+        <a-button type="primary" style="margin-right: 10px">API Doc</a-button>
+      </div>
+    </div>
+    <Alert
+      style="margin-top: 10px;margin-bottom: 10px"
+      show-icon
+      type="info"
+      message="此处仅展示拉取数据模式的API调用情况。"
+    />
+    <BasicTable @register="registerTable">
+      <template #headerTop>
+        <BasicForm @register="registerForm" />
+      </template>
+<!--      <template #bodyCell="{ column, record }">-->
+<!--        <template v-if="column.key === 'action'">-->
+<!--          <TableAction-->
+<!--            :actions="[-->
+<!--                {-->
+<!--                  icon: 'ant-design:delete-outlined',-->
+<!--                  color: 'error',-->
+<!--                  popConfirm: {-->
+<!--                    title: '是否确认删除',-->
+<!--                    placement: 'left',-->
+<!--                    confirm: deleteButton.bind(null, record),-->
+<!--                  },-->
+<!--                },-->
+<!--              ]"-->
+<!--          />-->
+<!--        </template>-->
+<!--      </template>-->
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { CountTo } from '@/components/CountTo';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { Tag, Card,Select,Alert } from 'ant-design-vue';
+  import { reactive,unref,onDeactivated,onMounted,ref,watch,Ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import {columns1,searchFormSchema} from "./ApiMonitor.data";
+  import {TableData} from "./ApiMonitorData";
+  import { BasicForm, useForm } from '@/components/Form';
+  defineProps({
+    loading: {
+      type: Boolean,
+    },
+  });
+
+  const [registerForm, { resetFields }] = useForm({
+    labelAlign: 'right',
+    labelWidth: 50,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: searchFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+
+  const [registerTable] = useTable({
+    title: '执行中请求',
+    api: async (params) => {
+      const response = {
+        pageNu: "1",
+        pageSize: "10",
+        pages: "1",
+        total: TableData.length,
+        code:'',
+        message:'',
+        data: [],
+      };
+      return { ...response,data: TableData };
+    },
+    columns:columns1,
+    pagination:true,
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn:false,
+    bordered: true,
+    scroll: { y: 500 },
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+
+
+
+  function deleteButton(){
+
+  }
+</script>
+<style lang="less" scoped>
+.card{
+  ::v-deep(.ant-card-body){
+    width: 100%;
+    display: flex;
+  }
+}
+
+
+.center{
+  width: 100%;
+  height:800px;
+  background-color: white;
+}
+</style>

src/views/dataSharingAndExchange/ApiMonitor/RightContent2.vue

+<template>
+  <Card :loading="loading">
+     2222
+  </Card>
+</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';
+
+
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/dataSharingAndExchange/ApiMonitor/RightContent3.vue

+<template>
+  <Card :loading="loading">
+    333
+  </Card>
+</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';
+
+
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/dataSharingAndExchange/ApiMonitor/RightContent4.vue

+<template>
+  <Card :loading="loading">
+    4444
+  </Card>
+</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';
+
+
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/dataSharingAndExchange/ApiMonitor/RightContent5.vue

+<template>
+  <Card :loading="loading">
+    5555
+  </Card>
+</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';
+
+
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/dataSharingAndExchange/ApiMonitor/RightContent6.vue

+<template>
+  <Card :loading="loading">
+    666
+  </Card>
+</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';
+
+
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/dataSharingAndExchange/ApiMonitor/index.vue

 <template>
-  <div>11111</div>
+  <PageWrapper contentClass="flex">
+    <ApiMonitorTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    <div class="p-4 w-3/4 xl:w-4/5">
+      <RightContent1 :loading="loading" class="enter-y" />
+      <RightContent2 class="!my-4 w-full" :loading="loading" />
+      <RightContent3 class="!my-4 !md:my-0 !my-4 w-full" :loading="loading" />
+      <RightContent4 class="!my-4 w-full" :loading="loading" />
+      <RightContent5 class="!my-4 !md:my-0 w-full" :loading="loading" />
+    </div>
+  </PageWrapper>
 </template>
+<script lang="ts" setup>
+  import { reactive,unref,onDeactivated,onMounted,ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { PageWrapper } from '@/components/Page';
+  import ApiMonitorTree from './ApiMonitorTree.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useModal } from '@/components/Modal';
+  import { useGo } from '@/hooks/web/usePage';
+  import { useRoute,onBeforeRouteLeave } from 'vue-router';
+  import {forEach} from "lodash-es";
+  import RightContent1 from './RightContent1.vue';
+  import RightContent3 from './RightContent3.vue';
+  import RightContent2 from './RightContent2.vue';
+  import RightContent4 from './RightContent4.vue';
+  import RightContent5 from './RightContent5.vue';
+
+  defineOptions({ name: 'AccountManagement' });
+  const { createMessage, createConfirm } = useMessage();
+  const route = useRoute();
+  const go = useGo();
+
 
-<script>
-export default {
-  name: "index"
-}
-</script>
 
-<style scoped>
 
-</style>
+  onMounted(() => {
+
+  });
+
+</script>